<template>
  <div class="">

    <Tabs value="name1">
      <Tab-pane label="今日收藏" name="name1">
        <Table :columns="columns1" :data="todayTabledata" @on-sort-change="sortTodayChangeAction"></Table>
        <div class="page_center">
          <Page @on-change="todayPageChangeAction" show-elevator :total="todayCount" ></Page>
        </div>
      </Tab-pane>

      <Tab-pane label="历史收藏" name="name2">
        <Table :columns="columns1" :data="historyTabledata" @on-sort-change="sortHistoryChangeAction"></Table>
        <div class="page_center">
          <Page :total="historyCount" @on-change="historyPageChangeAction" show-elevator></Page>
        </div>
      </Tab-pane>

    </Tabs>

  </div>
</template>

<script>
    // 发送ajax 请求的组件
    import getData from '../../api/getData'
    // 分页的配置信息
    import {page_config} from '../../config/config'

    var favoriteFolderLogic = {
        // 今日收藏
        getTodayFavorite: function (vueObj) {
            var todayParamObj = {
                // 1今日收藏   0全部收藏
                "ButTypeDate": 1,
                "pageSize": page_config.pagesize,
                "pageIndex": vueObj.currentPage,
                //            类别 ： 爆文 素材 自媒体....
                "MCType": vueObj.MCType,
//        排序类型
                "OrderType": vueObj.OrderType,
//            排序名称
                "OrderName": vueObj.OrderName,
            };
            getData.post("getFavoriteAll", todayParamObj).then(function (response) {
                vueObj.todayTabledata = response.data.data;
                vueObj.todayCount = response.data.PageCount;
            })
                .catch(function (response) {
                    console.log("vueObj.tableData catch");
                    console.log(response);
                });
        },
        // 全部收藏
        getHistoryFavorite: function (vueObj) {
            var historyParamObj = {
                // 1今日收藏   0全部收藏
                "ButTypeDate": 0,
                "pageSize": page_config.pagesize,
                "pageIndex": vueObj.currentPage,
                //            类别 ： 爆文 素材 自媒体....
                "MCType":vueObj.MCType,
//        排序类型
                "OrderType":vueObj.OrderType,
//            排序名称
                "OrderName":vueObj.OrderName,
            };

            getData.post("getFavoriteAll", historyParamObj).then(function (response) {
                vueObj.historyTabledata = response.data.data;
                vueObj.historyCount = response.data.PageCount;
            })
                .catch(function (response) {
                    console.log("vueObj.tableData catch");
                    console.log(response);
                });
        },

        // 收藏 或者 取消收藏  向服务器打交道
        collectAction: function( url, param, vueObj ){
            /// <param name=" SCTypeID ">类型ID  ---1.素材 2.自媒体文库 3 爆文 4.干货 5.人物企业6.海外视频7.作者监控</param>
            /// <param name="MCTID">素材ID</param>

            var paramObj = {
                SCTypeID:param.SCType,
                MCTID:param.MCID
            };
            getData.post( url, paramObj ).then(function (response) {
                var data = response.data;
                debugger
                if(data.code == 0){
                    param.ISSC = param.ISSC ? 0 : 1;
                }else{
                    vueObj.$Message.info( data.msg ? data.msg : '网络错误，请稍后重试');
                }
            }).catch(function (response) {
                console.log(response);
            });
        }
    };

  export default {
    mounted: function(){
        // 今日收藏
        favoriteFolderLogic.getTodayFavorite(this);
        // 全部收藏
        favoriteFolderLogic.getHistoryFavorite(this);
    },
    data: function () {
        return {
            // 今日收藏
            todayTabledata: [],
            // 今日收藏总页数
            todayCount: 0,
            // 历史收藏
            historyTabledata: [],
            // 历史收藏总页数
            historyCount: 0,
//            类别 ： 爆文 素材 自媒体....
            MCType:1,
//        排序类型
        OrderType:1,
//            排序名称
        OrderName:1,
            currentPage:1,
            columns1: [
                {
                    title: '缩略图',
                    key: 'Image',
                    render: (h, params) => {
//                        console.log("params.row.MCTImage ： " + params.row.MCTImage);
                        var imgUrl = null;
                        if(params.row.MCTImage == ""){
                            imgUrl = require('../../../static/img/logo_.jpg');
                        }else{
                            imgUrl = params.row.Image;
                        }
                        return h('div', {
                            attrs: {
                                style: 'width:50px;height: auto'
                            },
                        }, [
                            h('img', {
                                // 正常的 HTML 特性
                                attrs: {
                                    src: imgUrl,
                                    style: 'width:100%;height: auto;'
                                },
                                on: {
                                    click: function () {
//                                        console.dir(arguments);
//                                        return false;
                                    }
                                }
                            })
                        ]);
                    }
                },
                {
                    title: '标题',
                    key: 'Title',
                    ellipsis: true,
                    render: (h, params) => {
                        return h('div', [
                            h('a', {
                                attrs: {
                                    href: params.row.URL,
                                    target:"_blank",
                                    title: params.row.Title
                                },
                            }, params.row.Title)
                        ]);
                    }
                },
                {
                    title: '类型',
                    key: 'TypeName'
                },
                {
                    title: '来源',
                    key: 'Source',
                    align: "center"
                },
                {
                    title: '时间',
                    key: 'RDate',
                    sortable: true
                },
                {
                    title: '阅读',
                    key: 'Amout',
                    sortable: true,
                    width: 100
                },
                {
                    title: '评论',
                    key: 'CommentNum',
                    sortable: true,
                    width: 100
                },
                {
                    title: '收藏',
                    key: 'ISSC',
                    render: (h, params) => {
                        return h('div', [
                            h('span', {
                                on: {
                                    click: () => {
                                        this.markFavorite( params.row );
                                    }
                                }
                            }, [
                                h('Icon', {
                                    props: {
                                        type: params.row.ISSC ? 'star' : 'ios-star-outline'
                                    },
                                    style: {
                                        fontSize: '20px'
                                    }
                                })
                            ])
                        ]);
                    },
                }

            ],
        }
    },
      methods: {
          // 标记收藏或者取消收藏
          markFavorite( param ){
              var url = param.ISSC == 1 ? '' : 'cancelFavorite';
              if(url != ""){
                  favoriteFolderLogic.collectAction( url, param, this);
              }
          },
          // 分页触发的事件
          historyPageChangeAction: function (currentPage) {
              this.currentPage = currentPage;
              // 全部收藏
              favoriteFolderLogic.getHistoryFavorite(this);
          },
          // 分页触发的事件
          todayPageChangeAction: function (currentPage) {
              this.currentPage = currentPage;
              // 今日收藏
              favoriteFolderLogic.getTodayFavorite(this);
          },
          // 查看table的详情
          showItemDetail: function () {
              console.log("showItemDetail")
          },
          // 排序的问题
          sortTodayChangeAction: function(sortJson){
              var order = sortJson.order;
              var key = sortJson.key;
              if(key == "RDate"){
                  this.OrderName = 1;
              }
              if(key == "AMDAmout"){
                  this.OrderName = 3;
              }
              if(key == "AMDCommentNum"){
                  this.OrderName = 2;
              }

              if(order == "desc"){
                  this.OrderType = 1;
              }else{
                  this.OrderType = 2;
              }
//              今日收藏
              favoriteFolderLogic.getTodayFavorite(this);
          },
          // 排序的问题
          sortHistoryChangeAction: function(sortJson){
              var order = sortJson.order;
              var key = sortJson.key;
              if(key == "RDate"){
                  this.OrderName = 1;
              }
              if(key == "AMDAmout"){
                  this.OrderName = 3;
              }
              if(key == "AMDCommentNum"){
                  this.OrderName = 2;
              }

              if(order == "desc"){
                  this.OrderType = 1;
              }else{
                  this.OrderType = 2;
              }
               // 全部收藏
              favoriteFolderLogic.getHistoryFavorite(this);
          }
      }
  }
</script>

<style scoped lang="scss">

</style>
